<template>
  <!-- 导航头 -->
  <div class="barbox">
    <el-menu
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      background-color="transparent"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <!-- 点击后 返回菜单页面 -->
      <el-menu-item class="logo2"
        ><span @click="returnhome">特勤系统</span>
      </el-menu-item>
      <!-- 跳转路由 -->
      <el-menu-item @click="goTaskdiplay" index="/allrouter/index"
        >首页</el-menu-item
      >
      <el-menu-item @click="goabout" index="/allrouter/about"
        >路线管理</el-menu-item
      >
      <!-- <el-menu-item index="/alltask/taskmap">任务管理</el-menu-item> -->
      <el-menu-item @click="gotaskchart" index="/allrouter/statistics"
        >任务统计</el-menu-item
      >
      <!-- 用户登出修改密码 -->
      <div class="user">
        <el-dropdown size="mini">
          <span
            class="el-dropdown-link drop"
            style="font-size:16px;color:#fff;"
          >
            <i class="el-icon-user-solid"></i>{{ username
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handlcommit" icon="el-icon-setting"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item
              icon="el-icon-switch-button"
              @click.native="logout"
              >登出</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-menu>
    <!-- 修改密码窗口 -->
    <el-dialog
      title="修改密码"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
      top="25vh"
    >
      <div class="formbox">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
          style="width:350px"
        >
          <el-form-item label="用户名" prop="name">
            <el-input
              v-model.number="ruleForm.name"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input
              type="password"
              v-model="ruleForm.password2"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item class="passfooter">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >修改密码</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    // 表单验证密码
    var checkAge = (rule, value, callback) => {
      let kong = /\s/;
      if (!value) {
        return callback(new Error("用户不能为空"));
      }
      setTimeout(() => {
        if (kong.test(this.ruleForm.name)) {
          // console.log(value, '12')
          callback(new Error("不能有空格"));
        } else {
          callback();
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.password2 !== "") {
          this.$refs.ruleForm.validateField("password2");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      activeIndex: "1",
      activeIndex2: "1",
      titlename: "特勤系统",
      username: "用户名", //登出的用户名称
      // 修改密码
      ruleForm: {
        password: "",
        password2: "",
        name: "",
      },
      // 验证密码
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        password2: [{ validator: validatePass2, trigger: "blur" }],
        name: [{ validator: checkAge, trigger: "blur" }],
      },
      returns: "www.baidu.com",
      dialogVisible: false,
    };
  },
  methods: {
    // 保存验证
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log("可以请求");
          this.dialogVisible = false;
          this.$c.msg("密码修改成功", "success");
          // 修改后登出
          this.logout();
        } else {
          this.$c.msg("密码不一致");
          return false;
        }
      });
    },
    // 修改密码
    handlcommit() {
      this.dialogVisible = true;
      this.ruleForm.password = "";
      this.ruleForm.password2 = "";
      this.$nextTick(() => {
        if (this.$refs.ruleForm !== undefined) {
          this.$refs.ruleForm.resetFields();
        }
      });
    },
    // 登出
    logout() {
      sessionStorage.clear();
      console.log("登出请求");
      // 删除token 的信息等
      // sessionStorage.removeItem("token");
      // location.reload();
      this.$router.push("/login");
    },
    // 返回首页
    returnhome() {
      // 填写返回门户菜单的一页http://localhost:8080/menhu
      // window.location.href = "http://192.168.1.253:8888";
      this.$router.push("/menhu");
      // window.location.href = "http://localhost:8080/menhu";
    },

    // 跳转路由设置
    goTaskdiplay() {
      this.$router.push("/allrouter/index");
    },
    goabout() {
      this.$router.push("/allrouter/about");
    },
    gotaskmap() {
      this.$router.push("/alltask/taskmap");
    },
    gotaskchart() {
      this.$router.push("/allrouter/statistics");
    },
  },
};
</script>
<style scoped lang="scss">
// 左侧标题头
.logo2 {
  color: #fff;
  font-size: 25px;
  &::after {
    content: "";
    height: 30px;
    border: 1px solid #fff;
    position: absolute;
    left: 148px;
    top: 18px;
    z-index: 1;
    display: flex;
    align-content: center;
    align-items: center;
  }
}
// 靠右显示
.user {
  height: 60px;
  // text-align: right;
  padding-right: 20px;
  // line-height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.formbox {
  color: #fff;
  text-align: center;
}
.passfooter {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
    text-align: right;
  }
}
::v-deep .el-form {
  margin: 0 auto !important;
}
</style>
